<script setup lang="ts">
import { reactive, ref, toRaw } from "vue";
import { onLoad } from "@dcloudio/uni-app";
import { useQuery } from "@/hooks/init";
import { useShare } from "@/hooks/share";
import { usePageScroll } from "@/hooks/scroll";
import { useList, useTabs } from "@/hooks/page";
import {
  guider_info_api,
  guider_work_info_api,
  user_follow_api,
} from "@/package/guider/api/guider_didi";
import { data_api } from "@/api/my";
import { EV_USER } from "@/constant/event";
import { AppData } from "@/utils/app";
import { previewImage } from "@/utils/meida";
import { Account } from "@/utils/account";
import { Router } from "@/utils/router";
import { Toast } from "@/utils/toast";

import NavBack from "@/components/nav/back.vue";
import NavBar from "@/components/nav/bar.vue";
import NavSpace from "@/components/nav/space.vue";
import Swipe from "@/components/swipe/swipe.vue";
import IndexMiniBtn from "./components/index-mini-btn.vue";
import IndexMenuTitle from "@/pages/index/components/index-menu-title.vue";
import IndexTabItem from "./components/index-tab-item.vue";
import IndexTabProduct from "./components/index-tab-product.vue";
import IndexTabNote from "./components/index-tab-note.vue";
import IndexTabComment from "./components/index-tab-comment.vue";
import IndexTabMember from "./components/index-tab-member.vue";
import FormButton from "@/components/form/button.vue";
import ServiceContact from "@/components/service/contact.vue";
import PopupBottom from "@/components/popup/bottom.vue";
import PopupModal from "@/components/popup/modal.vue";
import CommunityNotePicker from "@/pages/index/components/community-note-picker.vue";

onLoad((options) => {
  useQuery<{ id?: string; isTeam?: "1"; isPreview?: "1" }>(
    options as MiniApp.AppLaunchOption,
    (query) => {
      infoData.id = query.id || ""; // 查看自己时，没有参数
      infoData.isTeam = query.isTeam === "1"; // 团队版
      infoData.isPreview = query.isPreview === "1"; // 预览
      infoData.isMy = infoData.isPreview ? false : !query.id; // 没有 id 时，自己查看
      reloadData().then(() => {
        Account.isLogin && reloadMyData();

        shareOption.title = infoData.name;
        shareOption.data = {
          id: query.id || infoData.id,
          isTeam: query.isTeam || "",
        };
      });
      tabList.value = infoData.isTeam
        ? ["TA们的服务", "TA们的分享", "用户点评", "团队成员"]
        : infoData.isMy
        ? ["我的服务", "我的分享", "用户点评"]
        : ["TA的服务", "TA的分享", "用户点评"];
    }
  );
});
const { pageIsScroll, onPageScroll } = usePageScroll();

const reloadData = () => {
  const fn = (resp: any) => {
    adList.value = (resp.img_arr as string[]).map((i) => {
      return { type: "img", url: i };
    });
    if (resp.video_url) {
      adList.value.unshift({
        type: "video",
        url: resp.video_url,
        poster: resp.video_pic,
      });
    }
    if (resp.guider_id) {
      infoData.id = resp.guider_id + "";
    }
    if (!infoData.isTeam) {
      infoData.sex = resp.sex;
      infoData.certification_str = resp.certification_str;
      infoData.is_work = resp.is_work;
      infoData.work_name = resp.work_name;
      infoData.guider_rank_name = resp.guider_rank_name;
      infoData.credential_str = resp.credential_str;
      const age_str: string[] = [];
      if (resp.age) age_str.push(`${resp.age}岁`);
      if (resp.guide_height) age_str.push(`${resp.guide_height}cm`);
      if (resp.guide_weight) age_str.push(`${resp.guide_weight}kg`);
      infoData.age_str = age_str.join(" / ");
      infoData.guide_identity = resp.guide_identity;
      tempData.teamId = resp.work_id;
    }
    infoData.avatar_url = resp.avatar_url || resp.logo_url;
    infoData.name = resp.name;
    infoData.work_year_str = resp.work_year_str || resp.work_count;
    infoData.service_count = resp.service_count;
    infoData.score = resp.score;
    infoData.city_name = resp.city_name;
    infoData.language_str = resp.language_str;
    infoData.tag_str = resp.tag_str || resp.service_str;
    infoData.speaker_scenic = resp.speaker_scenic || resp.explain_srt;
    infoData.guider_tips = resp.guider_tips || resp.tips || "";
    if (resp.comment_count > 0) {
      tabList.value[2] = `用户点评(${resp.comment_count})`;
    }
    infoData.fullname = resp.fullname || resp.main_guider_name;
    proveList.value = resp.prove_img;
    tempData.storeId = resp.mini_shop?.appid || "";
    tempData.storePath = resp.mini_shop?.mini_program_url || "";
  };

  return infoData.isTeam
    ? guider_work_info_api({ work_id: infoData.id }).then(fn)
    : guider_info_api({ guider_id: infoData.id }).then(fn);
};

const adIndex = ref(0);
const adList = ref<any[]>([]);
const adClick = () => {
  const _adList = toRaw(adList.value);
  const _adIndex = toRaw(adIndex.value);
  const ad = _adList[_adIndex];
  if (ad.type === "video") {
    Router.navigateTo(
      `/package/other/pages/video/detail?${Router.dataToQuery({
        src: ad.url,
        poster: ad.poster,
      })}`
    );
  } else {
    // 第一个是否是视频
    if (_adList[0].type === "video") {
      previewImage(
        _adList.filter((i) => i.type === "img").map((i) => i.url),
        _adIndex - 1
      );
    } else {
      previewImage(
        _adList.map((i) => i.url),
        _adIndex
      );
    }
  }
};

const infoData = reactive({
  id: "",
  isTeam: false, // 是否团队版
  isMy: false, // 是否自己查看
  isPreview: false, // 自己预览
  is_work: 0,
  work_name: "",
  avatar_url: "",
  guider_rank_name: "",
  name: "",
  sex: 1,
  certification_str: "",
  work_year_str: "",
  work_count: "",
  service_count: "",
  score: "",
  city_name: "",
  language_str: "",
  tag_str: "",
  credential_str: "",
  age_str: "",
  speaker_scenic: "",
  guider_tips: "",
  isExpand: false,
  fullname: "",
  guide_identity: 4,
});

const teamClick = () => {
  Router.navigateTo(
    `/package/guider/pages/detail/index?id=${tempData.teamId}&isTeam=1`
  );
};

const proveVisible = ref(false);
const proveList = ref<string[]>([]);
const proveClick = (index: number) => {
  previewImage(toRaw(proveList.value), index);
};

const certificateClick = () => {
  Router.navigateTo(`/package/guider/pages/apply/detail`);
};

const tabList = ref<string[]>([]);
const { tabData, tabClick, tabChange } = useTabs();

const resourceClick = () => {
  Router.navigateTo(
    `/package/my/pages/guider/resource?id=${infoData.id}`,
    (resp) => {
      resp.eventChannel.once("ev-resource-edit", (resp) => {
        if (resp) reloadData();
      });
    }
  );
};
const noteClick = () => {
  communityNotePicker.value?.show((type, filePath) => {
    Router.navigateTo(
      `/package/guider/pages/note/edit?${Router.dataToQuery({
        type,
        filePath,
      })}`
    );
  });
};
const editClick = () => {
  Router.navigateTo("/package/my/pages/guider/info", (resp) => {
    resp.eventChannel.once("ev-info-edit", (resp) => {
      if (resp) {
        reloadData();
        Router.navigateBack();
      }
    });
  });
};
const previewClick = () => {
  Router.navigateTo(`/package/guider/pages/detail/index?isPreview=1`);
};

const storeClick = () => {
  if (infoData.isPreview) return Toast.show("预览模式下无法进行该操作哦~");
  if (!tempData.storePath)
    return Toast.show(
      infoData.isTeam ? "该团队尚未开通店铺" : "导游尚未开通店铺"
    );
  // Router.navigateToMiniProgram(tempData.storeId, tempData.storePath);
  Router.navigateTo(`/package/guider/pages/store/index?id=${infoData.id}`);
};
const contactClick = () => {
  Toast.show("预览模式下无法进行该操作哦~");
};

const myData = reactive({ isFollow: false });
const followClick = () => {
  if (infoData.isPreview) return Toast.show("预览模式下无法进行该操作哦~");

  const fn = () => {
    const fn2 = () => {
      myData.isFollow = !myData.isFollow;
      user_follow_api({
        follow_id: infoData.id,
        type: infoData.isTeam ? 2 : 1,
      }).then(() => {
        uni.$emit(EV_USER, { type: "follow", data: { id: infoData.id } });
      });
    };

    myData.isFollow
      ? popupModal.value?.show({ content: "是否确认要取消关注？" }, () => fn2())
      : fn2();
  };

  Account.isLogin
    ? fn()
    : Account.login(() => {
        reloadMyData().then(() => {
          // 没有关注，则关注
          myData.isFollow || fn();
        });
      });
};

const reloadMyData = () => {
  return data_api<{ guider_didi_follow?: number[] }>({
    includes: "guider_didi_follow",
  }).then((resp) => {
    myData.isFollow = (resp.guider_didi_follow || []).includes(
      Number(infoData.id)
    );
  });
};

const popupModal = ref<InstanceType<typeof PopupModal>>();
const communityNotePicker = ref<InstanceType<typeof CommunityNotePicker>>();
const tempData = { teamId: "", storeId: "", storePath: "" };

const { onShareAppMessage, onShareTimeline, shareOption } = useShare(
  "/package/guider/pages/detail/index"
);
</script>

<template>
  <NavBack />
  <NavBar :background="pageIsScroll ? '#ffffff' : ''">
    <view class="detail-nav" v-if="pageIsScroll">
      <image
        class="detail-nav-img"
        :src="infoData.avatar_url"
        mode="aspectFill"
      />
      <view class="detail-nav-text">{{ infoData.name }}</view>
    </view>
  </NavBar>
  <NavSpace />
  <view v-if="adList.length > 0 || infoData.isMy" style="height: 160rpx"></view>
  <view class="detail-ad" v-if="adList.length > 0" @click="adClick">
    <Swipe v-model="adIndex" :listData="adList" />
  </view>
  <image
    class="detail-bg"
    v-else
    :src="
      infoData.isMy
        ? '/package/guider/static/detail-bg2.png'
        : '/package/guider/static/detail-bg.png'
    "
    mode="widthFix"
  />

  <view style="position: relative">
    <view class="detail-info">
      <view class="detail-info-content">
        <view style="display: flex; align-items: center">
          <view class="detail-info-name">{{ infoData.name }}</view>
          <image
            class="detail-info-sex"
            v-if="infoData.sex === 1"
            src="@/package/guider/static/detail-sex.png"
          />
          <image
            class="detail-info-sex"
            v-else
            src="@/package/guider/static/detail-sex2.png"
          />
        </view>
        <view class="detail-info-certificate">
          <image
            class="detail-info-certificate2"
            v-if="infoData.isTeam"
            src="@/package/guider/static/detail-certificate.png"
            @click="proveVisible = true"
          />
          <template v-else>
            <image
              class="detail-info-certificate3"
              src="@/package/guider/static/detail-certificate-state.png"
            />
            <view class="detail-info-certificate4">
              {{ infoData.certification_str }}
            </view>
          </template>
        </view>
      </view>
      <view
        class="detail-info-btn"
        v-if="infoData.isMy"
        @click="certificateClick"
      >
        修改认证
        <image
          class="detail-info-btn2"
          src="@/package/guider/static/detail-index-arrow.png"
        />
      </view>

      <view
        class="detail-info-follow"
        v-else
        :style="{ opacity: myData.isFollow ? 0.4 : '' }"
        @click="followClick"
      >
        {{ myData.isFollow ? "已" : "+ " }}关注
      </view>
    </view>

    <view class="detail-avatar">
      <image
        class="detail-avatar-img"
        :src="infoData.avatar_url"
        mode="aspectFill"
      />
      <view
        class="detail-avatar-tag"
        v-if="!infoData.isTeam && infoData.guider_rank_name"
      >
        <image
          class="detail-avatar-tag2"
          src="@/package/guider/static/detail-rank.png"
        />
        {{ infoData.guider_rank_name }}
      </view>
    </view>

    <view class="detail-resource">
      <template v-if="adList.length > 1">
        <view
          class="detail-resource-item"
          v-if="!infoData.isTeam && infoData.is_work === 1"
          @click="teamClick"
        >
          <IndexMiniBtn :text="`来自${infoData.work_name}`" showArrow />
        </view>
        <view class="detail-resource-item" @click="resourceClick">
          <IndexMiniBtn
            :text="
              infoData.isMy
                ? '上传视频/图片'
                : `${adIndex + 1}/${adList.length}`
            "
            icon="/package/guider/static/detail-resource.png"
            :showArrow="!infoData.isMy"
          />
        </view>
      </template>
      <template v-else>
        <view
          class="detail-resource-item"
          v-if="!infoData.isTeam && infoData.is_work === 1"
          @click="teamClick"
        >
          <IndexMiniBtn
            :text="`来自${infoData.work_name}`"
            :theme="infoData.isMy ? '' : 'white'"
            showArrow
          />
        </view>
        <view
          class="detail-resource-item"
          v-if="infoData.isMy"
          @click="resourceClick"
        >
          <IndexMiniBtn
            text="上传视频/图片"
            icon="/package/guider/static/detail-resource.png"
          />
        </view>
      </template>
    </view>
  </view>

  <view class="detail-data">
    <view class="detail-data-wrapper">
      <view class="detail-data-item">
        <view class="detail-data-num">
          {{ infoData.work_year_str
          }}<text class="detail-data-num2">{{
            infoData.isTeam ? "人" : "年"
          }}</text>
        </view>
        <view class="detail-data-text">
          <image
            class="detail-data-icon"
            src="@/package/guider/static/detail-data.png"
          />
          {{ infoData.isTeam ? "团队人数" : "从业年限" }}
        </view>
      </view>
      <view class="detail-data-line"></view>
      <view class="detail-data-item">
        <view class="detail-data-num">
          {{ infoData.service_count }}<text class="detail-data-num2">次</text>
        </view>
        <view class="detail-data-text">
          <image
            class="detail-data-icon"
            src="@/package/guider/static/detail-data2.png"
          />
          服务次数
        </view>
      </view>
      <view class="detail-data-line"></view>
      <view class="detail-data-item">
        <view class="detail-data-num">
          {{ infoData.score }}<text class="detail-data-num2">分</text>
        </view>
        <view class="detail-data-text">
          <image
            class="detail-data-icon"
            src="@/package/guider/static/detail-data3.png"
          />
          综合评分
        </view>
      </view>
    </view>
  </view>

  <view class="detail-service">
    <view class="detail-service-title">
      <IndexMenuTitle :title="infoData.isTeam ? '认识TA们' : '认识TA'" />
    </view>
    <view class="detail-service-wrapper">
      <view class="detail-service-item" v-if="infoData.city_name">
        <image
          class="detail-service-icon"
          src="@/package/guider/static/detail-service.png"
        />
        <view class="detail-service-label">服务城市</view>
        <view class="detail-service-value">{{ infoData.city_name }}</view>
      </view>
      <view class="detail-service-item" v-if="infoData.language_str">
        <image
          class="detail-service-icon"
          src="@/package/guider/static/detail-service2.png"
        />
        <view class="detail-service-label">擅长语言</view>
        <view class="detail-service-value">{{ infoData.language_str }}</view>
      </view>
      <view class="detail-service-item" v-if="infoData.tag_str">
        <image
          class="detail-service-icon"
          src="@/package/guider/static/detail-service3.png"
        />
        <view class="detail-service-label">提供服务</view>
        <view class="detail-service-value">{{ infoData.tag_str }}</view>
      </view>
      <template v-if="!infoData.isTeam && infoData.credential_str">
        <view class="detail-service-item">
          <image
            class="detail-service-icon"
            src="@/package/guider/static/detail-service4.png"
          />
          <view class="detail-service-label">证书职称</view>
          <view class="detail-service-value">
            {{ infoData.credential_str }}
          </view>
        </view>
        <view class="detail-service-item" v-if="infoData.age_str">
          <image
            class="detail-service-icon"
            src="@/package/guider/static/detail-service5.png"
          />
          <view class="detail-service-label">个人信息</view>
          <view class="detail-service-value">{{ infoData.age_str }}</view>
        </view>
      </template>
      <view class="detail-service-item" v-if="infoData.speaker_scenic">
        <image
          class="detail-service-icon"
          src="@/package/guider/static/detail-service6.png"
        />
        <view class="detail-service-label">擅长讲解的景/博</view>
        <view class="detail-service-value">{{ infoData.speaker_scenic }}</view>
      </view>
    </view>
  </view>

  <view
    class="detail-intro"
    v-if="infoData.guider_tips"
    @click="infoData.isExpand = !infoData.isExpand"
  >
    <view
      class="detail-intro-content"
      :style="{ display: infoData.isExpand ? '' : '-webkit-box' }"
    >
      {{ infoData.guider_tips }}
    </view>
    <view class="detail-intro-expand" v-if="infoData.guider_tips.length > 72">
      <view class="detail-intro-expand2">
        {{ infoData.isExpand ? "收起" : "展开" }}
      </view>
      <image
        class="detail-intro-expand3"
        src="@/package/guider/static/detail-expand.png"
        :style="{ transform: infoData.isExpand ? 'rotate(-180deg)' : '' }"
      />
    </view>
    <image
      class="detail-intro-icon"
      src="@/package/guider/static/detail-intro.png"
    />
  </view>

  <scroll-view class="index-tab" scroll-x enhanced :show-scrollbar="false">
    <view class="index-tab-space"></view>
    <view
      class="index-tab-item"
      v-for="(i, d) of tabList"
      :key="d"
      @click="tabClick(d)"
    >
      <IndexTabItem :isActive="tabData.index === d" :text="i" />
    </view>
  </scroll-view>

  <swiper
    class="swiper"
    v-if="infoData.id"
    :current="tabData.current"
    :style="{
      height: `calc(100vh - ${AppData.rectData.topBarHeight}px - ${
        infoData.isMy ? '88rpx' : '208rpx'
      })`,
    }"
    @change="tabChange"
  >
    <swiper-item>
      <IndexTabProduct :id="infoData.id" :isTeam="infoData.isTeam" />
    </swiper-item>
    <swiper-item>
      <IndexTabNote
        :id="infoData.id"
        :isTeam="infoData.isTeam"
        :isMy="infoData.isMy"
      />
    </swiper-item>
    <swiper-item>
      <IndexTabComment :id="infoData.id" :isTeam="infoData.isTeam" />
    </swiper-item>
    <swiper-item v-if="infoData.isTeam">
      <IndexTabMember :id="infoData.id" />
    </swiper-item>
  </swiper>

  <view class="detail-menu" v-if="infoData.isMy">
    <view class="detail-menu-item" @click="noteClick">
      <image
        class="detail-menu-icon"
        src="@/package/guider/static/detail-menu.png"
      />
      <view class="detail-menu-name">发布笔记</view>
    </view>
    <view class="detail-menu-line"></view>
    <view class="detail-menu-item" @click="editClick">
      <image
        class="detail-menu-icon"
        src="@/package/guider/static/detail-menu2.png"
      />
      <view class="detail-menu-name">修改资料</view>
    </view>
    <view class="detail-menu-line"></view>
    <view class="detail-menu-item" @click="previewClick">
      <image
        class="detail-menu-icon"
        src="@/package/guider/static/detail-index-menu.png"
      />
      <view class="detail-menu-name">游客视角</view>
    </view>
  </view>
  <template v-else>
    <view style="height: 120rpx"></view>
    <view class="detail-fixed">
      <view class="detail-fixed-menu" @click="storeClick">
        <image
          class="detail-fixed-icon"
          src="@/package/guider/static/detail-index-store.png"
        />
        <view class="detail-fixed-text">店铺</view>
      </view>
      <view class="detail-fixed-btn">
        <view @click="contactClick">
          <FormButton>在线咨询</FormButton>
        </view>
        <ServiceContact v-if="!infoData.isPreview" />
      </view>
    </view>
  </template>

  <PopupBottom
    v-model="proveVisible"
    :title="infoData.isTeam ? '团队认证' : '导游认证'"
  >
    <view class="detail-prove">
      <view class="detail-prove-item">
        <image
          class="detail-prove-icon"
          src="@/package/guider/static/detail-prove.png"
        />
        <view class="detail-prove-label">实名认证</view>
        <template v-if="infoData.isTeam">
          <view class="detail-prove-value">主理人入住已通过平台实名审核</view>
          <view class="detail-prove-value">
            ·身份证证明材料&emsp;&emsp;·主理人姓名：{{ infoData.fullname }}
          </view>
        </template>
        <template v-else>
          <view class="detail-prove-value">已提供有效身份证明材料</view>
          <view class="detail-prove-value">
            ·身份证证明材料&emsp;&emsp;·导游真实姓名：{{ infoData.fullname }}
          </view>
        </template>
      </view>
      <view class="detail-prove-item">
        <image
          class="detail-prove-icon"
          src="@/package/guider/static/detail-prove2.png"
        />
        <view class="detail-prove-label">爽约包赔</view>
        <view class="detail-prove-value">
          确保您无忧预定，如遇违约，我们将全额赔付
        </view>
        <view class="detail-prove-value">
          ·未服务全额退&emsp;&emsp;·服务爽约必赔付
        </view>
      </view>
      <view class="detail-prove-item">
        <image
          class="detail-prove-icon"
          src="@/package/guider/static/detail-prove3.png"
        />
        <view class="detail-prove-label">资质证书</view>
        <view class="detail-prove-value">已提供真实有效的职业资质证书</view>
        <template v-if="infoData.isTeam">
          <view class="detail-prove-value">
            ·营业执照&emsp;&emsp;·经营许可证&emsp;&emsp;·导游证书
          </view>
        </template>
        <template v-else>
          <view class="detail-prove-value">
            ·执业证书认证材料&emsp;&emsp;{{
              infoData.guide_identity === 4 ? "·导游证" : ""
            }}
          </view>
        </template>
      </view>
      <template v-if="proveList.length > 0">
        <view class="detail-prove-title">相关证明</view>
        <scroll-view
          class="detail-prove-atlas"
          scroll-x
          enhanced
          :show-scrollbar="false"
        >
          <view class="detail-prove-space"></view>
          <image
            class="detail-prove-img"
            v-for="(i, d) of proveList"
            :key="d"
            :src="i"
            mode="aspectFill"
            @click="proveClick(d)"
          />
        </scroll-view>
      </template>
    </view>
  </PopupBottom>

  <PopupModal ref="popupModal" />
  <CommunityNotePicker ref="communityNotePicker" />
</template>

<style lang="scss">
page {
  padding-top: 100rpx;
  padding-bottom: 0;
  background-color: #ffffff;
}

.detail-ad,
.detail-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100vw;
}

.detail-ad {
  height: 490rpx;
}

.detail-nav {
  display: flex;
  align-items: center;
  padding-left: 50px;

  .detail-nav-img {
    flex-shrink: 0;
    width: 64rpx;
    height: 64rpx;
    border-radius: 50%;
  }

  .detail-nav-text {
    flex-grow: 1;
    min-width: 0;
    margin-left: 24rpx;
    font-size: 36rpx;
    color: #333333;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }
}

.detail-info {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding: 16rpx 40rpx 40rpx 222rpx;
  background-color: #ffffff;
  border-top-right-radius: 80rpx;

  .detail-info-content {
    flex-grow: 1;
    min-width: 0;
    margin-right: 10rpx;
  }

  .detail-info-name {
    min-width: 0;
    font-size: 32rpx;
    color: #333333;
    line-height: 44rpx;
    font-weight: bold;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-info-sex {
    width: 40rpx;
    height: 40rpx;
    margin-left: 10rpx;
  }

  .detail-info-certificate {
    display: flex;
    align-items: flex-start;
    // height: 36rpx;
    margin-top: 6rpx;
  }

  .detail-info-certificate2 {
    width: 144rpx;
    height: 36rpx;
  }

  .detail-info-certificate3 {
    flex-shrink: 0;
    width: 20rpx;
    height: 24rpx;
    margin-top: 4rpx;
    margin-right: 10rpx;
  }

  .detail-info-certificate4 {
    flex-grow: 1;
    min-width: 0;
    font-size: 22rpx;
    color: #666666;
    line-height: 32rpx;
  }

  .detail-info-btn {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    height: 36rpx;
    margin-top: 24rpx;
    font-size: 26rpx;
    color: #1bc76f;
    line-height: 36rpx;
  }

  .detail-info-btn2 {
    width: 24rpx;
    height: 24rpx;
    margin-left: 6rpx;
  }

  .detail-info-follow {
    flex-shrink: 0;
    width: 132rpx;
    margin-top: 18rpx;
    font-size: 28rpx;
    color: #ffffff;
    line-height: 56rpx;
    text-align: center;
    border-radius: 28rpx;
    background-color: #ff7900;
  }
}

.detail-avatar {
  position: absolute;
  left: 30rpx;
  top: -68rpx;

  .detail-avatar-img {
    display: block;
    width: 158rpx;
    height: 158rpx;
    border-radius: 50%;
    border: 6rpx solid #ffffff;
  }

  .detail-avatar-tag {
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 124rpx;
    padding-left: 26rpx;
    font-size: 22rpx;
    color: #9a5901;
    line-height: 36rpx;
    text-align: center;
    font-weight: bold;
    transform: translateX(-50%);
    border-radius: 30rpx 18rpx 18rpx 30rpx;
    background-color: #fbf5ea;
  }

  .detail-avatar-tag2 {
    position: absolute;
    left: 0;
    top: -2rpx;
    width: 40rpx;
    height: 40rpx;
  }
}

.detail-resource {
  position: absolute;
  top: -62rpx;
  right: 40rpx;
  display: flex;
  align-items: center;

  .detail-resource-item {
    margin-left: 14rpx;
  }
}

.detail-data {
  position: relative;
  padding: 0 30rpx 50rpx;
  background-color: #ffffff;

  .detail-data-wrapper {
    display: flex;
    align-items: center;
    border-radius: 20rpx;
    background-color: #fbfbfb;
  }

  .detail-data-item {
    width: 33.33%;
    padding-left: 36rpx;
    padding-top: 22rpx;
    padding-bottom: 26rpx;
  }

  .detail-data-num {
    font-size: 48rpx;
    color: #23ccba;
    line-height: 66rpx;
    font-weight: bold;
  }

  .detail-data-num2 {
    margin-left: 6rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
    font-weight: 400;
  }

  .detail-data-text {
    display: flex;
    align-items: center;
    height: 34rpx;
    font-size: 24rpx;
    color: #242424;
    font-weight: bold;
  }

  .detail-data-icon {
    width: 28rpx;
    height: 28rpx;
    margin-right: 4rpx;
  }

  .detail-data-line {
    flex-shrink: 0;
    height: 56rpx;
    border-left: 2rpx solid #ebebeb;
  }
}

.detail-service {
  margin-bottom: 20rpx;

  .detail-service-title {
    padding-left: 40rpx;
    margin-bottom: 40rpx;
  }

  .detail-service-wrapper {
    padding: 0 30rpx 4rpx;
  }

  .detail-service-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 24rpx;
  }

  .detail-service-icon {
    flex-shrink: 0;
    width: 32rpx;
    height: 32rpx;
    margin-top: 4rpx;
  }

  .detail-service-label {
    flex-shrink: 0;
    width: 140rpx;
    margin-left: 10rpx;
    font-size: 30rpx;
    color: #999999;
    line-height: 42rpx;
  }

  .detail-service-value {
    flex-grow: 1;
    min-width: 0;
    margin-left: 10rpx;
    font-size: 30rpx;
    color: #333333;
    line-height: 42rpx;
  }
}

.detail-intro {
  position: relative;
  padding: 30rpx 30rpx 20rpx;
  margin: 0 30rpx 30rpx;
  border-radius: 60rpx 0;
  background-color: #fafafa;

  .detail-intro-content {
    margin-bottom: 10rpx;
    font-size: 26rpx;
    color: #444444;
    line-height: 42rpx;
    // display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  .detail-intro-expand {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .detail-intro-expand2 {
    margin-right: 10rpx;
    font-size: 24rpx;
    color: #999999;
    line-height: 34rpx;
  }

  .detail-intro-expand3 {
    width: 20rpx;
    height: 12rpx;
  }

  .detail-intro-icon {
    position: absolute;
    left: 30rpx;
    top: -8rpx;
    width: 40rpx;
    height: 32rpx;
  }
}

.index-tab {
  height: 88rpx;
  white-space: nowrap;

  .index-tab-space,
  .index-tab-item {
    display: inline-block;
    vertical-align: top;
  }

  .index-tab-space {
    width: 30rpx;
  }

  .index-tab-item {
    margin-top: 16rpx;
    margin-right: 60rpx;
  }
}

.detail-prove {
  padding-top: 10rpx;
  padding-bottom: 50rpx;

  .detail-prove-item {
    position: relative;
    padding: 20rpx 30rpx 1rpx 82rpx;
    margin: 0 30rpx 20rpx;
    border-radius: 20rpx;
    background-color: #f8f8f8;
  }

  .detail-prove-icon {
    position: absolute;
    left: 30rpx;
    top: 26rpx;
    width: 32rpx;
    height: 32rpx;
  }

  .detail-prove-label {
    margin-bottom: 10rpx;
    font-size: 32rpx;
    color: #ff7900;
    line-height: 44rpx;
    font-weight: bold;
  }

  .detail-prove-value {
    margin-bottom: 20rpx;
    font-size: 24rpx;
    color: #666666;
    line-height: 34rpx;
  }

  .detail-prove-title {
    padding-left: 30rpx;
    padding-top: 20rpx;
    font-size: 36rpx;
    color: #333333;
    line-height: 50rpx;
    font-weight: bold;
  }

  .detail-prove-atlas {
    height: 260rpx;
    white-space: nowrap;
  }

  .detail-prove-space,
  .detail-prove-img {
    display: inline-block;
    vertical-align: top;
  }

  .detail-prove-space {
    width: 30rpx;
  }

  .detail-prove-img {
    width: 220rpx;
    height: 220rpx;
    margin-top: 20rpx;
    margin-right: 16rpx;
    border-radius: 20rpx;
  }
}

.detail-menu {
  position: fixed;
  left: 110rpx;
  right: 110rpx;
  bottom: calc(40rpx + env(safe-area-inset-bottom));
  display: flex;
  align-items: center;
  padding: 20rpx 4rpx;
  border-radius: 62rpx;
  background-color: #ffffff;
  backdrop-filter: blur(40rpx);
  box-shadow: 0 -4rpx 20rpx 0 rgba(0, 0, 0, 0.1);
  z-index: 9;

  .detail-menu-item {
    width: 33.33%;
  }

  .detail-menu-icon {
    display: block;
    width: 48rpx;
    height: 48rpx;
    margin: 0 auto 6rpx;
  }

  .detail-menu-name {
    font-size: 20rpx;
    color: #333333;
    line-height: 28rpx;
    text-align: center;
  }

  .detail-menu-line {
    flex-shrink: 0;
    height: 40rpx;
    border-left: 2rpx solid #eeeeee;
  }
}

.detail-fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  align-items: center;
  height: 120rpx;
  padding-left: 40rpx;
  padding-right: 30rpx;
  padding-bottom: env(safe-area-inset-bottom);
  background-color: #ffffff;

  .detail-fixed-menu {
    position: relative;
    flex-shrink: 0;
  }

  .detail-fixed-icon {
    display: block;
    width: 44rpx;
    height: 44rpx;
    margin: 0 auto 4rpx;
  }

  .detail-fixed-text {
    font-size: 20rpx;
    color: #666666;
    line-height: 28rpx;
    text-align: center;
  }

  .detail-fixed-btn {
    position: relative;
    flex-grow: 1;
    min-width: 0;
    margin-left: 40rpx;
  }
}
</style>